<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="mini"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="" prop="isFinish">
        <el-button
          :type="item.value == queryParams.isFinish ? 'primary' : 'default'"
          size="mini"
          @click="searchFinish(item.value)"
          v-for="item in isFinishOptions"
          :key="item.value"
          >{{ item.label }}</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="projectList">
      <el-table-column label="拜访计划状态" prop="state" width="120">
        <template slot-scope="scope">
          {{ scope.row.state | stateFilter }}
        </template>
      </el-table-column>
      <el-table-column label="所属区县" prop="area" width="120" />
      <el-table-column label="审批状态" prop="approveState" width="180">
        <template slot-scope="scope">
          {{ scope.row.approveState | approveStateFilter }}
        </template>
      </el-table-column>
      <el-table-column label="客户名称" prop="custormer" width="120" />
      <!-- <el-table-column label="客户来源" prop="custormerSource" width="180">
        <template slot-scope="scope">
          {{ scope.row.custormerSource | custormerSourceFilter }}
        </template>
      </el-table-column> -->

      <el-table-column label="创建类型" prop="createUserType" width="180">
        <template slot-scope="scope">
          {{ scope.row.createUserType | createUserTypeFilter }}
        </template>
      </el-table-column>
      <el-table-column label="行业" prop="trade" width="120" />
      <el-table-column label="转发次数" prop="forwardNum" width="120" />

      <el-table-column label="拜访天数" prop="visitDay" width="120" />
      <el-table-column label="拜访次数" prop="visitNum" width="120" />

      <el-table-column label="开始时间" prop="startTime" width="120" />
      <el-table-column label="结束时间" prop="endTime" width="120" />

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="190"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="toDetail(scope.row.id)">
            详情
          </el-button>

          <el-button size="mini" type="text" @click="addRecord(scope.row.id)">
            新增拜访记录
          </el-button>

          <el-button
            size="mini"
            type="text"
            @click="toRecordList(scope.row.id)"
          >
            查看拜访记录
          </el-button>

          <el-button
            size="mini"
            type="text"
            @click="approve(scope.row.id)"
            v-if="queryParams.isFinish == 2"
          >
            审批
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <AddRecordDialog ref="addRecordDialog" />
    <ApproveDialog ref="approveDialog" @success="getList" />
  </div>
</template>

<script>
import { getVisitList } from "@/api/visit/visit";
import {
  stateOptions,
  approveStateOptions,
  createUserTypeOptions,
  visitRecordOptions,
} from "@/constant/visit";
import AddRecordDialog from "./addRecordDialog.vue";
import ApproveDialog from "./ApproveDialog.vue";
export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isFinish: 2,
      },
      // 数据列表
      projectList: [{}],
      isFinishOptions: [
        {
          label: "待完成",
          value: 2,
        },
        {
          label: "已完成",
          value: 1,
        },
      ],
    };
  },
  components: { AddRecordDialog, ApproveDialog },
  created() {},
  mounted() {
    this.getList();
  },
  filters: {
    stateFilter(value) {
      if (!value) return "";
      return stateOptions.find((item) => item.value == value).label;
    },
    approveStateFilter(value) {
      if (!value) return "";
      return (approveStateOptions.find((item) => item.value == value) || {})
        .label;
    },
    createUserTypeFilter(value) {
      if (!value) return "";
      return createUserTypeOptions.find((item) => item.value == value).label;
    },
    visitRecordFilter(value) {
      if (!value) return "";
      return (visitRecordOptions.find((item) => item.value == value) || {})
        .label;
    },
  },
  methods: {
    getList() {
      this.loading = true;

      getVisitList(this.queryParams).then((response) => {
        this.projectList = response.rows;
        this.total = response.total;
        console.log(this.projectList, "========");

        this.loading = false;
      });
    },

    searchFinish(value) {
      this.queryParams.isFinish = value;
      this.handleQuery();
    },

    toDetail(id) {
      this.$router.push(`/visit/detail?id=${id}`);
    },

    /** 修改按钮操作 */
    handleUpdate() {},
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    addRecord(id) {
      this.$refs.addRecordDialog.showDialog(id);
    },

    toRecordList(id) {
      this.$router.replace(`/visit/recordList?id=${id}`);
    },
    approve(id) {
      this.$refs.approveDialog.showDialog(id);
    },
  },
};
</script>
